<template>
	<div class="big_screen_model">		
		<div class="model_title">
			<img src="/img/bigScreen/003.png" alt="" />
		</div>
		<div class="model_echarts">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>		
	</div>
</template>

<script>
	export default {
		name:'重大风险源分析',
		data() {
			return {
				option: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				let imgSrc = '/img/bigScreen/006.png';
				var legendData1 = ['A类', 'B类', 'C类']
				var legendData2 = ["D类", "R类"]
				let title = '总量';
				let echartData = [
				    {
						name: "A类",
						value: "12"
					},
				
					{
						name: "B类",
						value: "25"
					},
						
					{
						name: "C类",
						value: "30"
					},
					
					{
						name: "D类",
						value: "15"
					},
				
					{
						name: "R类",
						value: "18"
					}
				];

				let formatNumber = function(num) {
					let reg = /(?=(\B)(\d{3})+$)/g;
					return num.toString().replace(reg, ',');
				}
				let total = echartData.reduce((a, b) => {
					return a + b.value * 1
				}, 0);
				this.option = {
					color: ['#43F8A3', '#FF6E24', '#FFEB25', '#2EADFF', '#4DE2FF'],
					graphic: {
						elements: [{
							type: "image",
							z: 6,
							style: {
								image: imgSrc,
								width: 25,
								shadowBlur: 0,
								shadowColor: '#000',
								shadowOffsetX: '1',
								shadowOffsetY: '1',
							},
							left: 'center',
							top: "40%",
							position: [100, 100]
						}]
					},
					title: [{
						text: '统计',
						textAlign: 'center',
						x: '49%',
						y: '55%',
						textStyle: {
							fontSize: 12,
							fontWeight: 'normal',
							color: '#fff',

						}
					}],
					legend: [{
						type: "scroll",
						orient: 'vertical',
						icon: 'circle',
						left: '8%',
						align: 'left',
						top: 'center',
						itemGap: 20,
						textStyle: {
							fontSize: 14,
							color: '#66FFFF'
						},
						formatter: function(name) {
							
							return `${name} 12%`
						},
						data: legendData1
					}, {
						type: "scroll",
						orient: 'vertical',
						icon: 'circle',
						right: '8%',
						align: 'left',
						top: 'center',
						itemGap: 20,
						// bottom:'50%',
						textStyle: {
							fontSize: 14,
							color: '#66FFFF'
						},
						formatter: function(name) {
							return `${name} 12%`
						},
						data: legendData2
					}],
					series: [{
							type: "pie",
							radius: ['36%', '0%'],
							hoverAnimation: false,
							center: ["50%", "50%"],
							avoidLabelOverlap: false,
							label: {
								show: false
							},
							labelLine: {
								show: false
							},
							data: [{
								value: 1
							}],
							itemStyle: {
								normal: {
									color: new this.$echarts.graphic.RadialGradient(.5, .5, .7, [{
											offset: 0.5,
											color: 'rgba(45, 103, 146,.35)'
										},
										{
											offset: 1,
											color: 'rgba(45, 103, 146,.9)'
										}
									], false)
								},
							}
						},
						{
							type: "pie",
							radius: ['45%', '36%'],
							hoverAnimation: false,
							center: ["50%", "50%"],
							avoidLabelOverlap: false,
							label: {
								show: false
							},
							labelLine: {
								show: false
							},
							data: [{
								value: 1
							}],
							itemStyle: {
								normal: {
									color: 'rgba(42, 56, 80, .5)'
								}
							}
						},
						{
							type: "pie",
							radius: ['70%', '60%'],
							hoverAnimation: false,
							center: ["50%", "50%"],
							avoidLabelOverlap: false,
							label: {
								show: false
							},
							labelLine: {
								show: false
							},
							data: [{
								value: 1
							}],
							itemStyle: {
								normal: {
									color: 'rgba(42, 56, 80, .5)'
								}
							}
						},

						{
							type: 'pie',
							radius: ['45%', '60%'],
							center: ['50%', '50%'],
							data: echartData,
							hoverAnimation: false,
							itemStyle: {
								normal: {
									borderWidth: 5,
									borderColor: "rgba(42, 56, 80, .5)",
								}
							},

							label: {
								show: false,
								normal: {
									show: false,
								}
							},
						}
					]
				};
			}
					
		}
	}
</script>


<style lang="scss" scoped="">
	* {
		box-sizing: border-box;
	}	
	.big_screen_model{display: flex;flex-direction: column;height: 100%;
		.model_title {
			img {
				width: 100%;
				display: block;
			}
		}		
		.model_echarts {
			flex: 1;
		}		  
	}
</style>